<v-app>
  <v-btn
    fixed
    left
    top
    @click.native.stop.prevent
    @touchstart.native.stop.prevent
    text
    color="primary"
    style="margin:0%;padding:0%;"
    :style="{height:size+'px'}"
  >
    <div :style="{'font-size':(size * 0.8)+'px'}">{{score}}</div>
  </v-btn>
  <v-speed-dial v-model="menu" fixed top right direction="bottom" style="user-select: none;">
    <template v-slot:activator>
      <v-btn
        @click.native.stop.prevent="menu=!menu"
        @touchstart.native.stop.prevent="menu=!menu"
        fab
        depressed
        color="primary"
        :style="{width:size+'px', height:size+'px'}"
      >
        <v-icon v-if="menu" :size="size * 0.6">close</v-icon>
        <v-icon v-else :size="size * 0.6">menu</v-icon>
      </v-btn>
    </template>
    <v-btn
      fab
      depressed
      color="white"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="shuffle"
      @touchstart.native.stop.prevent="shuffle"
    >
      <v-icon :size="size * 0.55" color="red">casino</v-icon>
    </v-btn>
    <v-btn
      fab
      depressed
      color="white"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="window.location.href = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/algs.html'"
      @touchstart.native.stop.prevent="window.location.href = window.location.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + '/algs.html'"
    >
      <v-icon :size="size * 0.55" color="primary">school</v-icon>
    </v-btn>
    <v-btn
      fab
      depressed
      color="white"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="tune=true;menu=false;"
      @touchstart.native.stop.prevent="tune=true;menu=false;"
    >
      <v-icon :size="size * 0.55" color="primary">tune</v-icon>
    </v-btn>
    <v-btn
      fab
      depressed
      color="white"
      :style="{width:size*0.9+'px', height:size*0.9+'px'}"
      @click.native.stop.prevent="window.location = 'https://gitee.com/huazhechen/cuber'"
      @touchstart.native.stop.prevent="window.location = 'https://gitee.com/huazhechen/cuber'"
    >
      <v-icon :size="size * 0.55" color="primary">code</v-icon>
    </v-btn>
  </v-speed-dial>
  <div v-resize="resize" style="background-color: #C0C0C0;user-select: none;">
    <div ref="cuber"></div>
    <div style="margin:0%;padding:0%;"><keyboard ref="keyboard"></keyboard></div>
  </div>
  <v-bottom-sheet v-model="tune">
    <v-card flat style="margin: auto;touch-action: none;user-select: none;">
      <v-container fluid grid-list-md text-xs-center>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="option.scale" always-dirty thumb-label="always" max="100" min="0" label="大小"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="option.perspective" always-dirty thumb-label="always" max="100" min="0" label="透视"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="option.angle" always-dirty thumb-label="always" max="100" min="0" label="左右"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-slider v-model="option.gradient" always-dirty thumb-label="always" max="100" min="0" label="上下"></v-slider>
        </v-layout>
        <v-layout row wrap justify-center align-center>
          <v-btn @click.native.stop.prevent="option.reset" @touchstart.native.stop.prevent="option.reset" outlined color="red">重置</v-btn>
        </v-layout>
      </v-container>
    </v-card>
  </v-bottom-sheet>
</v-app>
